<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<scroll-view class="scroll-view_H" scroll-y="true" style="height: 1000rpx;">
				<view class="order-tab">
					<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
						<text>全部</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
						<text>待付款</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
						<text>待配送</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
						<text>待提货</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==4}" @click="onOrderTab(4)">
						<text>已提货</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==5}" @click="onOrderTab(5)">
						<text>售后服务</text>
						<text class="line"></text>
					</view>
					
				</view>
				<!-- 订单列表 -->
				<view class="order-list">
					<view class="list" v-for="(item,index) in datalist"  :key="index" v-if="datalist.length!=0">
						<view class="title-status">
							<view class="title">
								<text>下单时间：{{item.create_at}}</text>
							</view>
							<view class="status">
								<text>{{item.status_name}}</text>
								<!-- <text class="iconfont icon-laji del"></text> -->
							</view>
						</view>
						<view class="goods-list">
							<view class="goods" v-for="(its,ins) in item.order" :key="ins">
								<view class="thumb">
									<image :src="its.goods_cover" mode=""></image>
								</view>
								<view class="item">
									<view class="goods-name">
										<text class="two-omit">{{its.goods_name}}</text>
										<view class=" one-omit" style="margin-top: 10rpx;color: #999;">{{its.goods_spec}}</view>
									</view>
									<view class="" style="width: 30%;text-align: right;">
										<view class="price" v-if="item.goods_type!=3">
											<text class="min">￥</text>
											<text class="max">{{its.price_selling}}<text  v-if="item.balance2!=0">+{{item.balance2}}<text style="font-size: 24rpx;">礼品卡</text></text></text>
										</view>
										<view class="price" v-if="item.goods_type==3">
											<text class="max">{{Math.trunc(its.price_selling)}}</text><text style="margin-left: 10rpx;font-size: 24rpx;">礼品卡</text>
										</view>
										<view class="goods-num" style="margin-top: 6rpx;">
											<text class="min">x</text>
											<text class="max">{{its.stock_sales}}</text>
										</view>
									</view>
									
								</view>
							</view>
						</view>
						<view class="count" v-if="item.goods_type!=3">
							总价：￥{{OrderType==1?item.amount_total:item.amount_real}}<text  v-if="item.balance2!=0">+{{item.balance2}}<text style="font-size: 24rpx;">礼品卡</text></text>
						</view>
						<view class="count" v-if="item.goods_type==3">
							总价：{{Math.trunc(OrderType==1?item.amount_total:item.amount_real)}} <text style="font-size: 24rpx;margin-left: 6rpx;"> 礼品卡</text>
						</view>
						<!-- <view class="status-btn">
							<view class="btn" v-if="item.status==1" @click="tui.dianji(getQuxiao(item,0))">
								<text>取消订单</text>
							</view>
							<view class="btn" v-if="item.status==1" @click="go_url('/pages/ConfirmOrder/ConfirmOrder?order_no='+item.order_no)">
								<text>去付款</text>
							</view>
							<view class="btn" v-if="item.status==2" @click="go_url('/pages/OrderDetails/tuikuan?order_no='+item.order_no+'&type=1')">
								<text>申请退款</text>
							</view>
							<view class="btn" v-if="item.status==3" @click="tui.dianji(getQuxiao(item,1))">
								<text>确认收货</text>
							</view>
							<view class="btn" v-if="item.status==4" @click="go_url('/pages/OrderDetails/tuikuan?order_no='+item.order_no+'&type=2')">
								<text>申请退款</text>
							</view>
							<view class="btn" v-if="item.status!=1" @click="go_url('/pages/OrderDetails/OrderDetails?order_no='+item.order_no)">
								<text>查看详情</text>
							</view>
						</view> -->
					</view>
					<view class="empty-box"  v-if="datalist.length==0">
						<image src="/static/ic_nodata.png" mode=""></image>
						<view class="">暂无数据</view>
					</view>
				</view>
			</scroll-view>
			
		</tui-bottom-popup>
	</view>
</template>

<script>
	// import webUni from "@/common/uni.webview.js"
	export default {
		name: 'tOrderList',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			zhifu: {
				type: String,
				default:''
			},
			
			
		},
		data() {
			return {
				OrderType: 0,
				page:1,
				datalist:[],
				status:{'1':'待付款 ','2':'待配送','3':' 待提货','4':' 已提货','5':'售后服务'},
				modal:false,
				dataId:'',
				type:'',
				zhiboShow:false
			};
		},
		
		methods: {
			close() {
				this.$emit("close", {})
			},
			hide(){
				this.show = false;
			},
			getList(){
				let that = this
				that.tui.request("api.auth.order/orderList", "post", {status:that.OrderType,page:that.page}, false,false, false).then((res) => {
					that.datalist =that.datalist.concat( res.data.list)
				}).catch((res) => {})
			},
			onOrderTab(type){
				if(type==this.OrderType){
					return
				}
				this.OrderType = type;
				this.page=1
				this.datalist=[]
				this.getList()
			},
		}
	}
</script>

<style scoped lang="scss">
	/* 订单tab */
	.order-tab{
		position: fixed;
		left: 0;
		top: 0rpx;
		/* #ifdef APP-PLUS */
		top: calc(50rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef MP */
		top: 110rpx;
		/* #endif */
		z-index: 10;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		.tab{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20%;
			height: 80%;
			text{
				font-size: 26rpx;
				color: #959595;
			}
		}
		.action{
			text{
				color: #222222;
			}
			.line{
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 60rpx;
				height: 6rpx;
				background: linear-gradient(to right,$base,#f6f6f6);
				transform: translate(-50%,0);
			}
		}
	}
	
	/* 订单列表 */
	.order-list{
		width: 100%;
		margin-top: 120rpx;
		/* #ifdef APP-PLUS */
		margin-top: calc(170rpx + var(--status-bar-height));
		/* #endif */
		.list{
			padding: 0 4%;
			min-height: 350rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.count{
				text-align: right;border-bottom: 1px solid #eee;padding-bottom: 30rpx;
			}
			.title-status{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100rpx;
				.title{
					display: flex;
					align-items: center;
					text{
						font-size: 26rpx;
						font-weight: bold;
						color: #222222;
					}
				}
				.status{
					display: flex;
					align-items: center;
					text{
						font-size: 26rpx;
						color: $base;
					}
					.del{
						padding: 10rpx;
						font-size: 34rpx;
						color: #222222;
						background-color: #f6f6f6;
						border-radius: 100%;
						margin-left: 20rpx;
					}
				}
			}
			.goods-list{
				width: 100%;
				.goods{
					display: flex;
					align-items: center;
					width: 100%;
					height: 200rpx;
					.thumb{
						display: flex;
						align-items: center;
						width: 30%;
						height: 100%;
						image{
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
						}
					}
					.item{
						display: flex;
						align-items: center;
						width: 70%;
						height: 100%;
						.goods-name{
							width: 70%;
							text{
								font-size: 26rpx;
								color: #555555;
							}
						}
						.goods-price{
							text{
								color: #222222;
							}
							.min{
								font-size: 26rpx;
							}
							.max{
								font-size: 34rpx;
							}
						}
					}
				}
			}
			.status-btn{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				.btn{
					padding: 10rpx 30rpx;margin: 30rpx 0;
					border: 2rpx solid #EEEEEE;
					border-radius: 100rpx;
					margin-left: 20rpx;
					text{
						font-size: 26rpx;
						color: #555555;
					}
				}
				.action{
					border: 2rpx solid $base;
					text{
						color: $base;
					}
				}
			}
		}
	}
</style>